<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

</head>
<body>
<div class="page-group">
   <div class="page page-current">
        <header class="bar bar-nav">
            <h1 class='title'>下拉刷新</h1>
        </header>
         <!--content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 -->
        <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" data-ptr-distance="55" data-distance="100">
            <!-- 默认的下拉刷新层 -->
            <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>

            <div class="list">
                <!--<div class="list-block">-->
                    <!--<ul class="list-container">-->
                    <!--</ul>-->
                <!--</div>-->
            </div>



            <!-- 下面是正文 -->
            <!--<div class="card-container">-->
                <!--<div class="card">-->
                    <!--<div class="card-header">card</div>-->
                    <!--<div class="card-content">-->
                        <!--<div class="card-content-inner">-->
                            <!--这里是第1个card，下拉刷新会出现第2个card。-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <div class="infinite-scroll-preloader">
                <div class="preloader"></div>
            </div>
        </div>
        <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
        <!--<div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">-->
            <!--<div class="list-block">-->
                <!--<ul class="list-container">-->
                <!--</ul>-->
            <!--</div>-->
            <!--&lt;!&ndash; 加载提示符 &ndash;&gt;-->
            <!--<div class="infinite-scroll-preloader">-->
                <!--<div class="preloader"></div>-->
            <!--</div>-->
        <!--</div>-->
   </div>
</div>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type="text/javascript">
    var pageNo=1;
    var pageSize=100;
    $.initPullToRefresh(".pull-to-refresh-content");

    $(document).on('refresh', '.pull-to-refresh-content',function(e) {
        console.log("下拉");
        pageNo=1;
        $.ajax({
            "url": "/quota_apply_agency/queryData",
            "type": "POST",
            data:{pageNo:pageNo,pageSize:pageSize},
            success:function (result) {
                console.log(pageNo);
                var data=result.data;
                var html = '';
                for(var i=0;i<data.length;i++){
                    html+='<div class="list-block"><ul>'
                    html+='<li class="item-content"><div class="item-inner">'+
                        '<div class="item-title">等级名称</div>'+
                        '<div class="item-after">'+
                        data[i].levelName+
                        '</div>'+
                        '</div>'+
                        '</li>'
                    html+='<li class="item-content"><div class="item-inner">'+
                        '<div class="item-title">数量</div>'+
                        '<div class="item-after">'+
                        data[i].quantity+
                        '</div>'+
                        '</div>'+
                        '</li>'
                    html+='<li class="item-content"><div class="item-inner">'+
                        '<div class="item-title">状态</div>'+
                        '<div class="item-after">'+
                        data[i].status+
                        '</div>'+
                        '</div>'+
                        '</li>'
                    html+='<li class="item-content"><div class="item-inner">'+
                        '<div class="item-title">创建时间</div>'+
                        '<div class="item-after">'+
                        data[i].createdTime+
                        '</div>'+
                        '</div>'+
                        '</li>'
                    html+='<li class="item-content"><div class="item-inner">'+
                        '<div class="item-title">审批时间</div>'+
                        '<div class="item-after">'+
                        data[i].updatedTime+
                        '</div>'+
                        '</div>'+
                        '</li>'
                    html+='</div>'
                    html+='<ul>'
                }
                $('.pull-to-refresh-content .list').html('');
                $('.pull-to-refresh-content .list').append(html);
                pageNo++;
            // <li class="item-content">
            //         <div class="item-media"><i class="icon icon-f7"></i></div>
            //     <div class="item-inner">
            //         <div class="item-title">商品名称</div>
            //         <div class="item-after">杜蕾斯</div>
            //         </div>
            //         </li>
            //     $('.infinite-scroll-bottom .list-container').append(html);
                $.pullToRefreshDone('.pull-to-refresh-content');
                console.log('12345')
            }
        })
        // 模拟2s的加载过程
        // setTimeout(function() {
        //     var cardNumber = $(e.target).find('.card').length + 1;
        //     var cardHTML = '<div class="card">' +
        //         '<div class="card-header">card'+cardNumber+'</div>' +
        //         '<div class="card-content">' +
        //         '<div class="card-content-inner">' +
        //         '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
        //         '</div>' +
        //         '</div>' +
        //         '</div>';
        //
        //     $(e.target).find('.card-container').prepend(cardHTML);
        //     // 加载完毕需要重置
        //     $.pullToRefreshDone('.pull-to-refresh-content');
        // }, 2000);
    });

    // 加载flag
    var loading = false;
    // 最多可加载的条目
    var maxItems = 100;

    // 每次加载添加多少条目
    var itemsPerLoad = 100;

    function addItems(pageNo, pageSize) {
        // 生成新条目的HTML
        var html = '';
       $.ajax({
           "url": "/quota_apply_agency/queryData",
           "type": "POST",
           data:{pageNo:pageNo,pageSize:pageSize},
           success:function (result) {

               console.log('1234');
               var data=result.data;
               var html = '';
               for(var i=0;i<data.length;i++) {
                   html+='<div class="list-block"><ul>'
                   html += '<li class="item-content"><div class="item-inner">' +
                       '<div class="item-title">等级名称</div>' +
                       '<div class="item-after">' +
                       data[i].levelName +
                       '</div>' +
                       '</div>' +
                       '</li>'
                   html += '<li class="item-content"><div class="item-inner">' +
                       '<div class="item-title">数量</div>' +
                       '<div class="item-after">' +
                       data[i].quantity +
                       '</div>' +
                       '</div>' +
                       '</li>'
                   html += '<li class="item-content"><div class="item-inner">' +
                       '<div class="item-title">状态</div>' +
                       '<div class="item-after">' +
                       data[i].status +
                       '</div>' +
                       '</div>' +
                       '</li>'
                   html += '<li class="item-content"><div class="item-inner">' +
                       '<div class="item-title">创建时间</div>' +
                       '<div class="item-after">' +
                       data[i].createdTime +
                       '</div>' +
                       '</div>' +
                       '</li>'
                   html += '<li class="item-content"><div class="item-inner">' +
                       '<div class="item-title">审批时间</div>' +
                       '<div class="item-after">' +
                       data[i].updatedTime +
                       '</div>' +
                       '</div>' +
                       '</li>'
                   html+='</div>'
                   html+='<ul>'
                   $('.infinite-scroll-bottom .list ').append(html);
               }

               // pageNo++;
           }
       })
    }
    //预先加载第一页
    addItems(pageNo, pageSize);
    addItems(pageNo, pageSize);
    addItems(pageNo, pageSize);
    addItems(pageNo, pageSize);
    addItems(pageNo, pageSize);



    // 注册'infinite'事件处理函数
    $(document).on('infinite', '.infinite-scroll-bottom',function() {

        console.log('滚动');
        // 如果正在加载，则退出
        if (loading) return;

        // 设置flag
        loading = true;



        // // 模拟1s的加载过程
        // setTimeout(function() {
        //     // 重置加载flag
        //     loading = false;
        //
        //     if (lastIndex >= maxItems) {
        //         // 加载完毕，则注销无限加载事件，以防不必要的加载
        //         $.detachInfiniteScroll($('.infinite-scroll'));
        //         // 删除加载提示符
        //         $('.infinite-scroll-preloader').remove();
        //         return;
        //     }
        //
        //     // 添加新条目
        //     addItems(itemsPerLoad, lastIndex);
        //     // 更新最后加载的序号
        //     // lastIndex = $('.list-container li').length;
        //     lastIndex = $('.card-container .card').length;
        //     //容器发生改变,如果是js滚动，需要刷新滚动
        //     $.refreshScroller();
        // }, 1000);

    });
    $.init();
</script>
</body>
</html>